<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- <div class="box">
      linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
      创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。
    </div> -->
    <div class="box"></div>
    <style>
      .box {
        width: 500px;
        height: 300px;
        border: 1px solid black;

        /* background-image: radial-gradient(circle at top left, red, green); */
        /* background-image: radial-gradient(circle closest-side at 100px 100px, red, green); */
        /* shape	确定圆的类型:
ellipse (默认): 指定椭圆形的径向渐变。
circle ：指定圆形的径向渐变
size	定义渐变的大小，可能值：

farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边


position	定义渐变的位置。可能值：
center（默认）：设置中间为径向渐变圆心的纵坐标值。
top：设置顶部为径向渐变圆心的纵坐标值。
bottom：设置底部为径向渐变圆心的纵坐标值。 */

        /* background-image: radial-gradient(circle, red 10%, green 10%); */
        /* background-image: repeating-radial-gradient(circle, red 0, red 10%, green 10%, green 20%); */
        /* background: rgb(255, 255, 0); */
        background: hsl(0, 100%, 50%);

        /* 
        0 1  2  3  4    5    6
        0 1 10 11 100 101  110

        110 二进制 ？ 求十进制 6
        二进制转十进制  16进制转10进制  八进制转10进制

        */
      }
    </style>
  </body>
</html>
